<template>
  <div class="container">
    <van-cell>
      <div
        slot="title"
        class="header"
      >
        <van-image
          round
          :src="photo"
        />
        <div class="message">
          <div class="name">{{data.aut_name}}</div>
          <div class="time">{{date}}</div>
        </div>
      </div>
      <div
        slot="label"
        class="label"
      >
        <div v-if="data.cover.type===0">
          <h3 class="van-ellipsis typeone">{{data.title}}</h3>
        </div>
        <div v-else-if="data.cover.type===1">
          <div class="typetwo">
            <h3 class="van-ellipsis">{{data.title}}</h3>
            <van-image :src="data.cover.images[0]" />
          </div>
        </div>
        <div v-else-if="data.cover.type===3">
          <h3 class="van-ellipsis">{{data.title}}</h3>
          <div class="typethree">
            <van-image
              :key="index"
              v-for="(item,index) in data.cover.images"
              :src="item"
            />
          </div>
        </div>
      </div>
    </van-cell>
    <div class="button">
      <van-button
        square
        type="primary"
      >
        <template slot="icon">
          <van-icon name="chat-o" /></template>
        评论</van-button>
      <van-button
        square
        type="primary"
      ><template slot="icon">
          <van-icon name="good-job-o" /></template>点赞</van-button>
      <van-button
        square
        type="primary"
      ><template slot="icon">
          <van-icon name="star-o" /></template>收藏</van-button>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'

export default {
  props: {
    data: {
      type: [Object],
      required: true
    },
    photo: {
      type: [Object, String]
    }
  },
  computed: {
    date: function () {
      return dayjs(this.data.pubdate).format('YYYY-MM-DD hh:mm')
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  margin-bottom: 15px;
  .header {
    display: flex;
    .van-image {
      width: 72px;
      height: 72px;
      margin-right: 16px;
    }
    .message {
      .name {
        margin-top: 2px;
        font-size: 25px;
        color: #222222;
        height: 35px;
        line-height: 35px;
      }
      .time {
        font-size: 17px;
        color: #b0b0b0;
        height: 35px;
        line-height: 35px;
      }
    }
  }
  .label {
    color: #222222;
    .typeone {
      width: 640px;
    }
    .typetwo {
      width: 100%;
      display: flex;
      h3 {
        flex: 1;
        width: 100px;
      }
      .van-image {
        flex: 0;
        padding-top: 28px;
        margin-left: 20px;
        flex-shrink: 0;
        flex-basis: 230px;
        height: 150px;
      }
    }
    .typethree {
      display: flex;
      .van-image {
        flex: 1;
        margin-right: 12px;
      }
    }
  }
}
.button {
  background: rgb(255, 255, 255);
  display: flex;
  .van-button {
    flex: 1;
    background: none;
    border: 1px solid #ececec;
    color: #222222;
    font-size: 24px;
    .van-icon {
      font-size: 35px;
    }
  }
}
</style>
